<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <style>
    p span {
      font-size: 13px;
      background-color: red;
      color: white;
    }
    input {
      width: 350px;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <!-- 1.⽤户名必须包含数字和字⺟，不能有特殊字符（⾮ a-z 0-9）,⻓度  >=5以上
  2.密码必须包含⼤写以及⾄少⼀个特殊字符，⻓度>=8
  3.当点击登陆时，如果⽤户名和密码符合要求，需要提示验证合格信，不符合则在指定 input 标签处提示红⾊错误信息 -->
  <p id="p1">
    用户名：<input type="text" placeholder="请输入账号，除了特殊字符都可以" id="account">
  </p>
  <p id="p2">
    密码：<input type="text" placeholder="请输入密码，结尾必须是特殊字符" id="password">
  </p>
  <button onclick="Sign_in()">登录</button>
  <button onclick="location.reload()">刷新页面</button>
  <script>
    function Sign_in() {
      var account = document.getElementById('account').value
      var password = document.getElementById('password').value
      // 用户名的值
      // 判断用户名是否符合要求，符合则什么都没有，不符合则输出
      if((/\w+/).test(account) == false || account.length < 5){
        let accountWrong = document.createElement('span')
        accountWrong.innerText = '输入错误'
        document.getElementById('p1').appendChild(accountWrong)
      }

      // 密码的值
      // 判断密码是否符合要求，符合则什么都没有，不符合则输出
      if((/[a-zA-Z0-9]+\W{1,}$/).test(password) == false || password.length < 8){
        let passwordWrong = document.createElement('span')
        passwordWrong.innerText = '输入错误'
        document.getElementById('p2').appendChild(passwordWrong)
      }
      // console.log((/^[A-Z]{1,}[0-9]+\W{1,}$/).test(password) == false);
      
      // 判断⽤户名和密码是否符合要求
      if(((/\w+/).test(account) != false && account.length >= 5) && ((/^[A-Z]{1,}[0-9]+\W{1,}$/).test(password) != false && password.length >= 8)){
        alert('登录成功')
      } else {
        alert('用户名/密码输入错误')
      }
    }
  </script>
</body>
</html>